<template>
	<view class="mainbgc">
		<header-top :messageInfo="{typeFlag:true,message:'历史单据',liner:false}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content flexright" @click="show=true">筛选</view>
			</view>
		</header-top>
		<u-tabs :list="list1" @click="tabclick" :current="tabscurrent" :activeStyle="{ color: '#0BBDCB' }" lineColor="#0BBDCB"></u-tabs>
		<!-- 销售单-->
		<view class="mainpadding ffffff margin_top" v-show="tabscurrent==0">
			<view class="flexbetween">
				<view class="titletext flex1">单据尾号</view>
				<view class="titletext flex2">操作时间</view>
				<view class="titletext flex1s">金额</view>
			</view>
			<view class="flexbetween xiabiank margin_top" v-for="item in listxs.data" :key="item.id">
				<view class="nostrongtext flex1">{{item.purchase_code}}</view>
				<view class="nostrongtext flex2">{{item.time_text}}</view>
				<view class="lansetext flex1s">{{item.real_money}}</view>
			</view>
		</view>
		<!-- 退货单 -->
		<view class="mainpadding ffffff margin_top" v-show="tabscurrent==1">
			<view class="flexbetween">
				<view class="titletext flex1">单据尾号</view>
				<view class="titletext flex2">操作时间</view>
				<view class="titletext flex1s">金额</view>
			</view>
			<view class="flexbetween xiabiank margin_top" v-for="item in listth.data" :key="item.id">
				<view class="nostrongtext flex1">{{item.purchase_code}}</view>
				<view class="nostrongtext flex2">{{item.time_text}}</view>
				<view class="lansetext flex1s">{{item.real_money}}</view>
			</view>
		</view>
		<!-- 销售订单 -->
		<!-- <view class="mainpadding ffffff margin_top" v-show="tabscurrent==2">
			<view class="flexbetween">
				<view class="titletext flex1">单据尾号</view>
				<view class="titletext flex2">操作时间</view>
				<view class="titletext flex1s">金额</view>
			</view>
			<view class="flexbetween xiabiank margin_top" v-for="item in 6">
				<view class="nostrongtext flex1">030009</view>
				<view class="nostrongtext flex2">03/03 17:16</view>
				<view class="lansetext flex1s">98.00</view>
			</view>
		</view> -->
		<!-- 退货订单 -->
		<view class="mainpadding ffffff margin_top" v-show="tabscurrent==2">
			<view class="flexbetween">
				<view class="titletext flex1">单据尾号</view>
				<view class="titletext flex2">操作时间</view>
				<view class="titletext flex1s">金额</view>
			</view>
			<view class="flexbetween xiabiank margin_top" v-for="item in listxs.data" :key="item.id">
				<view class="nostrongtext flex1">{{item.purchase_code}}</view>
				<view class="nostrongtext flex2">{{item.time_text}}</view>
				<view class="lansetext flex1s">{{item.real_money}}</view>
			</view>
		</view>
		<u-popup round="20" :show="show" @close="show=false">
			<view class="mainpadding">
				<view class="flexcenter">
					<view class="titletext">筛选</view>
				</view>
				<view class="strongtext margin_top">时间</view>
				<view class="flexleft" style="flex-wrap: wrap;">
					<view class="screenbox flexcenter" v-for="(item,index) in datelist" :key="item.id"
						@click="change(item.name,index)">
						<view :class="currents == index? 'itemscreenfocus margin_top':'itemscreen margin_top'">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="strongtext margin_top">自定义时间</view>
				<view class="flexleft">
					<view class="inputscreenbox flexcenter" @click="shows = true">
						<input class="itemscreen margin_top" type="text" disabled v-model="start">
					</view>
					<view class="zwscreenbox flexcenter">
						<view class="strongtext">-</view>
					</view>
					<view class="inputscreenbox flexcenter" @click="showss = true">
						<input class="itemscreen margin_top" type="text" disabled v-model="end">
					</view>
				</view>
				<view class="flexbetween">
					<view class="surebtn reset flexcenter" style="margin-top: 60rpx;" @click="resetbtn">重置</view>
					<view class="surebtn flexcenter" style="margin-top: 60rpx;" @click="sureBtn">确认</view>
				</view>
				<!-- <view class="surebtn flexcenter" style="margin-top: 60rpx;" @click="sureBtn">确认</view> -->
			</view>
		</u-popup>
		<u-datetime-picker :show="shows" v-model="value1" mode="date" @confirm="confirm" @cancel="cancel"
			 @close="shows=false"></u-datetime-picker>
		<u-datetime-picker :show="showss" v-model="value2" mode="date" @confirm="confirms" @cancel="cancels"
			:minDate="mintime" @close="showss=false"></u-datetime-picker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() - 2
	month = month < 10 ? `0${month}` : month
	const date = d.getDate()
	export default {
		data() {
			return {
				show: false,
				current: 1,
				tabscurrent: 0,
				datelist: [{
						id: 1,
						name: '今日'
					},
					{
						id: 2,
						name: '昨日'
					},
					{
						id: 3,
						name: '本月'
					},
				],
				start: '开始时间',
				end: '结束时间',
				shows: false,
				showss: false,
				value1: Number(new Date()),
				value2: Number(new Date()),
				mintime: Number(new Date()),
				maxtime: Number(new Date()),
				list1: [
					{
						name:"销售单"
					},
					{
						name:"退货单"
					},
					// {
					// 	name:"销售订单"
					// },
					{
						name:"退货订单"
					}
				],
				customers_id: "",
				// 销售单分页处理数据
				pagexs: 1,
				limitxs: 12,
				listxs: {
					data: [
						{
							id: 0,
							purchase_code: "",
							real_money: "",
							sales_return: "",
							time_text: "",
							updatetime:0,
						}
					]
				},
				// 退货单分页处理数据
				pageth: 1,
				limitth: 12,
				listth: {
					data: [
						{
							id: 0,
							purchase_code: "",
							real_money: "",
							sales_return: "",
							time_text: "",
							updatetime:0,
						}
					]
				},
				currents:-1
			}
		},
		onLoad(options) {
			let data = JSON.parse(decodeURIComponent(options.msg));
			this.customers_id = data.kh_id
			this.tabscurrent = data.type
		},
		onShow() {
			this.getxiaoshouList() //销售单 
			this.gettuihuoList() //销售单
		},
		methods: {
			// 销售单列表
			getxiaoshouList(isPage, page) {
				let _this = this;
				httpRequest.request('appapi/manage/goods/sales_history', 'POST', {
					page: page || 1,
					limit: _this.limitxs,
					customers_id: this.customers_id,
					startdate: this.start=='开始时间'?'':this.start,
					enddate: this.end=='结束时间'?'':this.end,
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.listxs;
						if (isPage == true) {
							_this.listxs.data = dataList.data.concat(resList.data);
						} else {
							_this.listxs = resList
							_this.listxs.data = resList.data;
							
						}
						console.log(this.listxs,999)
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			// 退货单列表
			gettuihuoList(isPage, page) {
				let _this = this;
				httpRequest.request('appapi/manage/goods/sales_exchange_history', 'POST', {
					page: page || 1,
					limit: _this.limitth,
					customers_id: this.customers_id,
					startdate: this.start=='开始时间'?'':this.start,
					enddate: this.end=='结束时间'?'':this.end,
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.listth;
						if (isPage == true) {
							_this.listth.data = dataList.data.concat(resList.data);
						} else {
							_this.listth = resList
							_this.listth.data = resList.data;
							
						}
						console.log(this.listth,999)
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				if (this.tabscurrent == 0) { //销售单下拉
					let list = _this.listxs;
					let page = _this.pagexs;
					if (list.last_page <= page) {
						return false;
					}
					page++;
					_this.pagexs = page;
					_this.getxiaoshouList(true, page);
				} else if (this.tabscurrent == 1) {//退货单下拉
					let list = _this.listth;
					let page = _this.pageth;
					if (list.last_page <= page) {
						return false;
					}
					page++;
					_this.pageth = page;
					_this.gettuihuoList(true, page);
				}

			},
			// 重置
			resetbtn() {
				this.currentstatus = ""
				this.currents = -1
				this.start = "开始时间"
				this.end = "结束时间"
				this.show = false
				this.search()
			},
			sureBtn() {
				this.show = false
				this.search()
			},
			search() {
				this.getxiaoshouList() //销售单
				this.gettuihuoList() //销售单
			},
			change(name, index) {
				if (name == "今日") {
					this.start = this.riqi(0);
					this.end = this.riqi(0);
				} else if (name == "昨日") {
					this.start = this.riqi(-1);
					this.end = this.riqi(-1);
				} else if (name == "本月") {
					this.start = this.benyue();
					this.end = this.riqi(0);
				}
				this.currents = index;
			},
			// 昨天“-1”今天“0”明天“1”
			riqi(day) {
				let dd = new Date();
				dd.setDate(dd.getDate() + day);
				let y = dd.getFullYear();
				let m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
				let d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
				return y + "-" + m + "-" + d;
			},
			// 本月第一天
			benyue() {
				let y = new Date().getFullYear(); //获取年份
				let m = new Date().getMonth() + 1; //获取月份
				let d = '01'
				m = m < 10 ? '0' + m : m; //月份补 0
				return [y, m, d].join("-")
			},
			confirm(e) {
				console.log(e);
				this.shows = false;
				this.show = true;
				this.end = '结束时间';
				this.mintime = e.value;
				this.start = this.date(e.value);
				this.current = -1;
			},
			confirms(e) {
				this.showss = false;
				this.show = true;
				this.maxtime = e.value;
				this.end = this.date(e.value);
				this.current = -1;
			},
			date(timer) {
				var date = new Date(timer); //当前时间
				var year = date.getFullYear() //返回指定日期的年份
				var month = repair(date.getMonth() + 1); //月
				var day = repair(date.getDate()); //日
				var curTime = year + "-" + month + "-" + day

				function repair(i) {
					if (i >= 0 && i <= 9) {
						return "0" + i;
					} else {
						return i;
					}
				}
				return curTime
			},
			// tabs切换
			tabclick(item) {
				console.log('item', item);
				this.tabscurrent = item.index
			},
			// tab切换
			switchtab(i) {
				this.current = i
			},
		}
	}
</script>

<style lang="scss" scoped>
	.surebtn {
		width: 45%;
	}

	.reset {
		background: #ebb563;
	}

	.lansetext {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
	}

	.xiabiank {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid rgba(153, 153, 153, .1);
	}

	.flex1 {
		flex: 1;
	}

	.flex2 {
		flex: 2;
		text-align: center;
	}

	.flex1s {
		flex: 1;
		text-align: right;
	}

	.selecttimetext {
		font-size: 24rpx;
		font-family: San Francisco Display-Medium, San Francisco Display;
		font-weight: 500;
		color: #666666;
		line-height: 24rpx;
	}

	.selecttimetext {
		font-size: 24rpx;
		font-family: San Francisco Display-Medium, San Francisco Display;
		font-weight: 500;
		color: #666666;
		line-height: 24rpx;
	}

	.noselectbox {
		padding: 6rpx 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #999999;
		line-height: 33rpx;
		background-color: #eff0f0;
		border-radius: 30rpx;
		margin-right: 30rpx;
	}

	/* // tab切换 */
	.selectbox {
		padding: 6rpx 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #0BBDCB;
		line-height: 33rpx;
		background-color: #e1f4f5;
		border-radius: 30rpx;
		margin-right: 30rpx;
	}

	.shlable {
		padding: 6rpx 14rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
		line-height: 28rpx;
		background-color: #e7f9fa;
	}

	.wlable {
		padding: 6rpx 14rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #F3AD3D;
		line-height: 28rpx;
		background-color: #fef7ec;
	}

	.inputscreenbox {
		width: 40%;

		input {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 50rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333;
			background-color: #f7f9fa;
		}
	}

	.zwscreenbox {
		width: 20%;
		line-height: 80rpx;
	}

	.itemscreenfocus {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 50rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
		background-color: #e7f9fa;
	}

	// 筛选内容
	.screenbox {
		width: 33.33%;
	}

	.itemscreen {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 50rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		background-color: #f7f9fa;
	}
</style>
